import TimeManager from "./TimeManager.js";
import Utils from "./Utils.js";
export default class Carousel {
    static LEFT=Symbol();
    static RIGHT=Symbol();
    static cssBool=false;
    elem;
    autoBool = false;
    time = 200;
    dot;
    imgCon;
    list = [];
    itemList = [];
    bnList = [];
    pos=0;
    x=0;
    prev;
    moveBool=false;
    speed=50;
    direction=Carousel.LEFT;

    
    constructor(list) {
        this.elem = document.createElement("div");
        this.elem.className = "carousel";
        if (list) this.setData(list);
        Carousel.setCss();
        this.elem.addEventListener("mouseenter", e => this.mouseHandler(e));
        this.elem.addEventListener("mouseleave", e => this.mouseHandler(e));
        TimeManager.getInstance().add(this);
    }
    appendTo(parent) {
        if (typeof parent === "string") parent = document.querySelector(parent);
        if (parent) {
            parent.appendChild(this.elem);
            this.elem.style.height=parent.offsetWidth/3+"px";
      
        }
        
    }
    setData(list) {
        this.list = list;
        this.itemList.length = 0;
        this.pos=0;
        this.time=200;
        this.autoBool=false;
        this.createImageCon(this.elem);
        this.createBnList(this.elem);
      
    }

    mouseHandler(e) {
        this.autoBool = e.type === "mouseenter" ? false : (this.time = 200 && true);
    }
    createImageCon(carousel) {
        this.imgCon = document.createElement("div");
        this.imgCon.className = "img-con";
        this.imgCon.appendChild(this.getImageItem(0));
        carousel.appendChild(this.imgCon);
    }
    
    createBnList(carousel) {
        for(var i=0;i<2;i++){
            var img=new Image();
            img.src=`../img/index/${i===0 ? "left" : "right"}.png`;
            img.className=i===0 ? "left" : "right";
           
            img.addEventListener("click",e=>this.bnClickHandler(e));
            this.bnList.push(img)
            carousel.appendChild(img);
           }
    }
    getImageItem(n) {
        if(this.itemList[n]) return this.itemList[n];
        var div=document.createElement("div");
        div.className="image-item";
        div.innerHTML=`<img src="${this.list[n].img}">`
      
        this.itemList[n]=div;
        return this.itemList[n];
    }
    bnClickHandler(e) {
        if(e.target.className==="left"){       
            this.pos--;
            console.log( this.pos);
            if(this.pos<0) this.pos=this.list.length-1;
            this.direction=Carousel.RIGHT;
        }else{
            this.pos++;
            if(this.pos>this.list.length-1) this.pos=0;
            this.direction=Carousel.LEFT;
        }
        this.createNextImg();
    }
    createNextImg(){
        if(this.direction===Carousel.LEFT){
            this.x=0;
            this.imgCon.appendChild(this.getImageItem(this.pos));
        }else if(this.direction===Carousel.RIGHT){
            this.imgCon.insertBefore(this.getImageItem(this.pos),this.imgCon.firstElementChild);
            this.x=-this.getImageItem(this.pos).offsetWidth;
        }
        this.imgCon.style.left=this.x+"px";
        this.moveBool=true;
    }
    moveAnimation(){
        if(!this.moveBool) return;
        if(this.direction===Carousel.LEFT){
            this.x-=this.speed;
            if(this.x<=-this.imgCon.firstElementChild.offsetWidth){
                this.imgCon.firstElementChild.remove();
                this.x=0;
                this.moveBool=false;
            }
        }else if(this.direction===Carousel.RIGHT){
            this.x+=this.speed;
            if(this.x>=0){
                this.imgCon.lastElementChild.remove();
                this.x=0;
                this.moveBool=false;
            }
        }
        this.imgCon.style.left=this.x+"px";
    }
    autoMove(){
        if(!this.autoBool) return;
        this.time--;
        if(this.time>0) return;
        this.time=200;
        this.bnList[1].dispatchEvent(new MouseEvent("click"));
    }
    update(){
        this.moveAnimation()
        this.autoMove();
    }
   
    static setCss(){
        if(Carousel.cssBool) return;
        Carousel.cssBool=true;
        Utils.setCss(`
        .carousel{
            width: 100%;  
            position: relative;
            overflow: hidden;
        }
        .img-con{
            width: 200%;
            height: 100%;
            position: absolute;
            left: 0;
        }
        .img-con img{
            width: 100%;
            height: 100%;
        }

        .img-con .title{
            position: absolute;
            left: 15%;
            top:10%;
            color:white;
            font-size: 20px;
            user-select: none;
        }
        .img-con .day{
            font-size: 30px;
        }
        .img-con .image-item{
            width: 50%;
            height: 100%;
            float: left;
            position: relative;
        }
      

        .left,.right{
            width:70px;
            height:70px;
            border-radius:40px;
            position: absolute;
            top: 50%;
            opacity:0.2;
            transform: translate(0,-50%);
        }
        .left{
            left:40px;
            transform:rotate(-180deg);
        }
        .right{
            right: 40px;

        }`)
    }
}